<template>
	<div>
		<m-table name="admin-client" :action="action" :search="search">
			<el-table-column label="姓名" prop="name" width="120" />
			<el-table-column label="头像" width="130">
				<template slot-scope="scope">
					<el-avatar :src="scope.row.avatar" fit="contain"></el-avatar>
				</template>
			</el-table-column>
			<el-table-column label="手机号" prop="phone" width="140" />

			<el-table-column label="分配信息" prop="state" width="140">
				<template slot-scope="scope">
					<div class="tag">门店 : {{ scope.row.storeName || '未分配' }}</div>
					<div class="tag">白班 : {{ scope.row.dayUser || '未分配' }}</div>
					<div class="tag">夜班 : {{ scope.row.nightName || '未分配' }}</div>
					<div class="tag">专家 : {{ scope.row.expertName || '未分配' }}</div>
				</template>
			</el-table-column>

			<el-table-column label="评分" prop="state" width="140">
				<template slot-scope="scope">
					<div class="tag">门店 : {{ sources[scope.row.storeSource] }}</div>
					<div class="tag">白班 : {{ sources[scope.row.dayUserSource] }}</div>
					<div class="tag">夜班 : {{ sources[scope.row.nightUserSource] }}</div>
					<div class="tag">专家 : {{ sources[scope.row.expertUserSource] }}</div>
				</template>
			</el-table-column>

			<el-table-column label="签约状态" prop="state" width="120">
				<template slot-scope="scope">{{ getSignState(scope.row.signState)}}</template>
			</el-table-column>

			<el-table-column label="合约完成" prop="state" width="120">
				<template slot-scope="scope">{{ getContraceState(scope.row.contraceState) }}</template>
			</el-table-column>

			<el-table-column label="信息完善" prop="state" width="120">
				<template slot-scope="scope">{{ scope.row.bindInformation ? '已完善' : '未完善' }}</template>
			</el-table-column>

			<el-table-column label="分配客服" prop="state" width="120">
				<template slot-scope="scope">{{ scope.row.bindService ? '已分配' : '未分配' }}</template>
			</el-table-column>

			<el-table-column label="注册时间" prop="created" width="220" />

			<el-table-column label="分配" prop="state" width="110" fixed="right">
				<el-button size="mini" @click="handerAllocation(scope.row)" slot-scope="scope">分配客服</el-button>
			</el-table-column>

			<el-table-column label="详情" prop="state" width="90" fixed="right">
				<el-button size="mini" type="success" @click="view(scope.row)" slot-scope="scope">详情</el-button>
			</el-table-column>
		</m-table>

		<el-dialog title="分配客服人员" :visible.sync="allocation.show" width="320px">
			<el-form>
				<el-form-item label="白班客服">
					<apiSelect v-model="allocation.data.dayUser" url="admin-account/user/2"></apiSelect>
				</el-form-item>

				<el-form-item label="夜班客服">
					<apiSelect v-model="allocation.data.nightUser" url="admin-account/user/3"></apiSelect>
				</el-form-item>

				<el-form-item label="专家客服">
					<apiSelect v-model="allocation.data.expertUser" url="admin-account/user/4"></apiSelect>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitAllocation">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import apiSelect from '@/components/custom/apiSelect';
import request from '@/utils/request';
import { signState, contraceState } from '@/config/account';
export default {
	components: {
		apiSelect,
	},
	data() {
		return {
			signState: signState,
			contraceState: contraceState,
			sources: ['未评分', '轻微', '中度', '严重'],
			//分配客服
			allocation: {
				show: false,
				data: {
					clientId: 0,
					dayUser: null,
					nightUser: null,
					expertUser: null,
				},
			},
			search: [
				{ icon: 'el-icon-mobile', type: 'like', name: 'name', label: '用户姓名', span: 4, value: '' },
				{ icon: 'el-icon-mobile', type: 'like', name: 'phone', label: '联系方式', span: 4, value: '' },
			],
			action: { remove: false, edit: false, add: false, export: false },
		};
	},
	methods: {
        getSignState(val) {
            return signState.find(item => item.id == val).name;
        },
        getContraceState(val) {
            return contraceState.find(item => item.id == val).name;
        },
		handerAllocation(e) {
			this.allocation.data.clientId = e.id;
			this.allocation.show = true;
		},
        view(e){
            this.$router.push({
                path: '/clientdetail',
                query: {
                    id: e.id
                }
            })
        },
		async submitAllocation() {
			if (!this.allocation.data.dayUser) {
				this.$message.error('请分配白班客服');
				return;
			}

			if (!this.allocation.data.nightUser) {
				this.$message.error('请分配夜班客服');
				return;
			}

			if (!this.allocation.data.expertUser) {
				this.$message.error('请分配专家客服');
				return;
			}

			await request.post(`admin-client/Allocation`, this.allocation.data);

			this.$message.success('分配成功');

			this.allocation.show = false;
		},
	},
};
</script>

<style>
.tag {
	font-size: 10px !important;
}
</style>